<template>
	<view>
		<movable-area class="movable-area">
			<movable-view class="movable-view" direction="vertical" :x="x" :y="y" :inertia='true' :animation='true'>
				<slot></slot>
			</movable-view>
		</movable-area>
	</view>
</template>
<script>
	export default {
		name: 'Draggable',
		props: {
			x: {
				type: Number,
				default: 375
			},
			y: {
				type: Number,
				default: 600
			}
		},
		data() {
			return {}
		},
	}
</script>
<style lang="scss">
	$all_width: 96rpx;
	$all_height: 80rpx;

	.movable-area {
		height: 100vh;
		width: 750rpx;
		top: 0;
		position: fixed;
		pointer-events: none; //此处要加，鼠标事件可以渗透
		z-index: 998;

		.movable-view {
			width: $all_width;
			height: $all_height;
			pointer-events: auto; //恢复鼠标事件
		}
	}
</style>